<template>
  <div class="user">
    <!-- -->
    <button @click="addUser" v-if="showAddButton">新增</button>
    <h1>用户展示列表</h1>
    <table>
    <tr>
      <th>用户id</th>
      <th>登录名</th>
      <th>用户名</th>
      <th>联系方式</th>
      <th>职位</th>
      <th>邮箱</th>
      <th>操作</th>
    </tr>
        <tr v-for="(item,index) in employee" :key="item.employeeId">
            <td>{{item.employeeId}}</td>
            <td>{{item.loginName}}</td>
            <td>{{item.empName}}</td>
            <td>{{item.phoneNumber}}</td>
            <td>{{item.position}}</td>
            <td>{{item.email}}</td>
            <td>
              <button @click="updateUser(item.employeeId)">修改</button>
              <button @click="deleteUserById(item.employeeId)">删除</button>
            </td>
        </tr>
    </table>
  </div>
</template>

<script>

import {getUserList,deleteUserById} from '@/api/user'
export default {
  name: 'VueTest04Index',

  data() {
    return {
      empName:'',
      phoneNumber:'',
      pageNum:1,
      employee:[],
      showAddButton:true
    };
  },

  created() {
    this.getUserList();
  },

  methods: {
    getUserList(){
        var params = {empName:this.empName,phoneNumber:this.phoneNumber,pageNum:this.pageNum};
        getUserList(params).then(data=>{
          this.employee = data.data.list;
          console.log(data.data.list);
        })
    },
    addUser(){
        this.$router.push({name:'AddUser'})
        this.showAddButton = false
    },
    changeShowButton(){
        this.showAddButton = true
    },
    updateUser(employeeId){
      this.$router.push({name:'UpdateUser',params:{employeeId}})
    },
    deleteUserById(employeeId){
      var params = {id:employeeId};
      deleteUserById(params).then(data=>{
        this.getUserList();
      })
    }
  },
};
</script>